<template>
  <div class="certify">
    <p>请选择你的身份</p>
    <div class="type">
      <van-radio-group v-model="form.type" direction="horizontal">
        <van-radio name="1">学生</van-radio>
        <van-radio name="2">老师</van-radio>
      </van-radio-group>
    </div>
    <van-field
      readonly
      clickable
      label="学校"
      placeholder="请选择你的学校"
      @click="schoolShow = true"
      v-model="form.school"
      required
      :is-link="true"
    />
    <!-- <van-field
      readonly
      clickable
      label="班级"
      placeholder="请选择你的班级"
      @click="handleClass"
      v-model="form.class"
      required
      :is-link="true"
    /> -->
    <van-field
      label="学院"
      placeholder="请填写你的学院"
      v-model="form.college"
      required
    />
    <van-field
      label="班级"
      placeholder="请填写你的班级"
      v-model="form.Class"
      required
    />
    <van-popup v-model="schoolShow" position="bottom">
      <van-picker
        show-toolbar
        title="请选择你的学校"
        :columns="schoolCol"
        @confirm="onConfirmSchool"
        @cancel="schoolShow = false"
      />
    </van-popup>
    <!-- <van-popup v-model="classShow" position="bottom">
      <van-picker
        show-toolbar
        title="请选择你的班级"
        :columns="classCol"
        @confirm="onConfirmClass"
        @cancel="classShow = false"
      />
    </van-popup> -->
    <p>请上传你的学生证</p>
    <div style="text-align: left">
      <van-uploader :after-read="afterRead" v-model="form.fileList" :max-count="1"/>
    </div>
    <van-button
      round
      type="info"
      size="large"
      style="margin-top: 20px"
      :disabled="!canSubmit"
      @click="submit"
      >提交</van-button
    >
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      form: {
        type: "1",
        school: "",
        schoolID: "",
        college:"",
        Class: "",
        fileList:[]
      },
      schoolCol: [],
      classCol: [],
      classShow: false,
      schoolShow: false,
      columns: [],
    };
  },
  computed: {
    canSubmit() {
      return Boolean(this.form.school && this.form.Class && this.form.college&&this.form.fileList);
    },
  },
  created() {
    this.$axios.get("/getSchoolList").then((res) => {
      if (res.code === 200) {
        res.data.forEach((item) => {
          this.schoolCol.push(item.schoolName);
        });
        console.log(this.schoolCol);
      }
    });
  },
  methods: {
    handleClass() {
      this.classShow = true;
      if (!this.form.school) {
        Toast("请先选择学校");
      }
    },
    submit() {
      let data = new FormData();
      for(let i in this.form.fileList){
        data.append("file", this.form.fileList[i].file);
      }
      data.append("school",this.form.school)
      data.append("college",this.form.college)
      data.append("Class",this.form.Class)
      data.append("userID",localStorage.getItem('userID'))
      this.$axios
        .post("/certify", data,{headers: {
                'Content-Type': 'multipart/form-data'}}).then(res=>{
                  if(res.code===200) this.$router.replace('/mine')
                })
        
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    onConfirmSchool(value, index) {
      let that = this;
      this.form.school = value;
      this.form.schoolID = index + 1;
      console.log("school", this.form.school);
      this.schoolShow = false;
      this.$axios.get(`getClassList?schoolID=${index + 1}`).then((res) => {
        if (res.code === 200) {
          let temp = "";
          let i = -1;
          res.data.forEach((item) => {
            if (item.collegeName !== temp) {
              ++i;
              temp = item.collegeName;
              that.classCol.push({ 'text': temp, 'children': [{'text':item.className}] });
            } else {
              that.classCol[i].children.push({'text':item.className});
            }
          });
          console.log(that.classCol)
        }
      });
      console.log("college", this.classCol);
    },
    onConfirmClass(value,index) {
      this.form.class=value[1]
      this.classShow=false
    },
    
  },
};
</script>

<style scoped>
.certify {
  padding: 10px;
}

.type {
  text-align: left;
}

p {
  text-align: left;
  padding-left: 10px;
  font-weight: bold;
  margin-bottom: 1px solid;
}
.van-radio-group {
  justify-content: center;
}
</style>